<style lang="scss" scoped>
.shop_rule {
  .shop-head {
    .img-bg {
      height: 2.6rem;
    }
    .rule-tit {
      padding: 0.05rem 0.15rem;
      color: #b61621;
      border: 0.03rem solid #e93241;
      position: relative;
      &::after,
      &::before {
        position: absolute;
        content: "";
        width: 0.15rem;
        height: 0.16rem;
        border: 0.04rem solid #fff;
        top: 50%;
        margin-top: -0.12rem;
      }
      &::after {
        right: -0.14rem;
      }
      &::before {
        left: -0.14rem;
      }
    }
    .shop-notes {
      padding: 0.04rem 0.1rem;
    }
    .sub-tit {
      height: 0.4rem;
      top: 0.3rem;
      color: #f1687a;
      &.border-t::before {
        border-top: 1px solid #fcdfe4;
        color: #fcdfe4;
        width: calc(100% - 0.2rem);
        left: 0.1rem;
      }
      div {
        padding: 0 0.1rem;
        position: relative;
        top: -0.2rem;
      }
    }
  }
  main {
    background: #faf8fb !important;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -0.08rem;
      border-top: 0.1rem solid #fff;
      border-left: 0.1rem solid transparent;
      border-right: 0.1rem solid transparent;
    }
    li {
      padding-bottom: 0.7rem;
      position: relative;
      &::before {
        content: "";
        width: 1px;
        height: 0.7rem;
        position: absolute;
        bottom: 0;
        background: #dbdcde;
        left: 0.7rem;
      }
      &:last-child {
        padding-bottom: 0.3rem;
        &::before {
          height: 0;
        }
      }
      .icons {
        margin: 0 0.3rem;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 100%;
        background: #eee;
      }
    }
  }
}
</style>

<template>
    <div class="shop_rule full">
        <div class="shop-head bgfff">
            <div class="img-bg"></div>
            <div class="cred font-22 box-center padding-tb20">
                <div class="rule-tit bor-r">积分规则</div>
            </div>
            <div class="cfff box-center padding-tb5">
                <div class="bgred font-16 shop-notes">亲积分商城只有在最新版本才有哦~</div>
            </div>
            <div class="sub-tit border-t box-center padding-b20">
                <div class="bgfff">如何获得积分</div>
            </div>
        </div>
        <main class="padding-tb20">
            <ul>
                <li class="flex-col">
                    <div class="icons">
                        <i></i>
                    </div>
                    <div class="box1 flex-row flex-middle">
                        <div class="padding-b10 font-16">1.签到送积分</div>
                        <span class="c82">连续签到5天单日可获得25积分</span>
                    </div>
                </li>
                <li class="flex-col">
                    <div class="icons">
                        <i></i>
                    </div>
                    <div class="box1 flex-row flex-middle">
                        <div class="padding-b10 font-16">2.完成接货</div>
                        <span class="c82">可获得20积分</span>
                    </div>
                </li>
                <li class="flex-col">
                    <div class="icons">
                        <i></i>
                    </div>
                    <div class="box1 flex-row flex-middle">
                        <div class="padding-b10 font-16">3.完成运输</div>
                        <span class="c82">可获得20积分</span>
                    </div>
                </li>
            </ul>
        </main>
    </div>
</template>

<script>
export default {
  name: "shop_rule"
};
</script>

